import 'package:flutter/material.dart';
import 'package:flutter_demo/datas/categoryDatas.dart';
import 'package:flutter_demo/widgets/textWidget.dart';

import 'package:flutter_demo/models/categoryItem.dart';

class CategoryPage extends StatefulWidget {
  @override
  _CarPageState createState() => _CarPageState();
}

class _CarPageState extends State<CategoryPage> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: ListView.builder(
            itemCount: categories.length,
            itemBuilder: (BuildContext context, int index) {
              double itemHeight = 25.0;
              return GestureDetector(
                onTap: () {
                  setState(() => currentIndex = index);
                },
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 15.0),
                  child: new Row(
                    children: <Widget>[
                      Container(
                        color: currentIndex == index
                            ? Colors.red
                            : Colors.transparent,
                        height: itemHeight,
                        width: 5.0,
                      ),
                      Expanded(
                        child: Text(
                          categories[index].title,
                          textAlign: TextAlign.center,
                          style: TextStyle(fontWeight: FontWeight.normal),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
        Container(
          width: 1.0,
          color: Colors.grey[300],
        ),
        Expanded(
          flex: 3,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15.0),
            child: ListView.builder(
              itemCount: 3,
              itemBuilder: (BuildContext context, int index) {
                CategoryItem item = categories[currentIndex];
                Widget childWidget;
                switch (index) {
                  case 0:
                    childWidget = Padding(
                      padding: const EdgeInsets.only(top: 15.0),
                      child: Image.network(
                        item.imageScr,
                        height: 120.0,
                        fit: BoxFit.cover,
                      ),
                    );
                    break;
                  case 1:
                    childWidget = Padding(
                      padding: const EdgeInsets.symmetric(vertical: 20.0),
                      child: MText(
                        item.title,
                        color: Colors.grey,
                      ),
                    );
                    break;
                  case 2:
                    double screenWidth = MediaQuery.of(context).size.width;
                    int crossAxisCount = 3;
                    double spacing = 20.0;
                    double imageWidth = (screenWidth * 3 / 4 -
                            (crossAxisCount - 1) * spacing -
                            30) /
                        crossAxisCount;

                    childWidget = GridView.count(
                      shrinkWrap: true,
                      primary: false,
                      physics: ClampingScrollPhysics(),
                      crossAxisCount: crossAxisCount,
                      mainAxisSpacing: spacing,
                      crossAxisSpacing: spacing,
                      childAspectRatio: 0.7,
                      children: item.childs.map((CategoryItem item) {
                        return Column(
                          children: <Widget>[
                            Image.network(
                              item.imageScr,
                              width: imageWidth,
                              height: imageWidth,
                              fit: BoxFit.cover,
                            ),
                            Container(
                              height: 8.0,
                            ),
                            MText(
                              item.title,
                              color: Colors.grey,
                              fontSize: 12.0,
                            ),
                          ],
                        );
                      }).toList(),
                    );
                    break;
                }
                return childWidget;
              },
            ),
          ),
        ),
      ],
    );
  }
}
